@extends('layouts.app')

@section('content')
<style>
    html {
        background: url(/img/25.jpg) top;
    }

    body {
        height: auto;
        background: url(/img/24.jpg) no-repeat top;
    }

    .tit {
        background: url(/img/9.png) no-repeat;
        padding-left: 20px;
        width: 748px;
        font: 24px '微软雅黑';
        color: #333;
        line-height: 27px;
        margin: 0 auto 40px;
    }

    .tit .true-option {
        padding: 0 20px;
        background: url(/img/option_green.png) no-repeat center left;
    }

    .tit .false-option {
        padding-left: 20px;
        background: url(/img/22.png) no-repeat center left;
    }

    .list {
        width: 748px;
        margin: 0 auto 20px;
    }

    .list p {
        display: block;
        width: 710px;
        font: 16px '微软雅黑';
        color: #333;
        line-height: 42px;
        margin-bottom: 15px;
    }

    .list ul li {
        font: 14px '微软雅黑';
        color: #333;
        padding-left: 40px;
        line-height: 36px;
        background: url(/img/21.png) no-repeat center left;
    }

    .list ul li.cur {
        background: url(/img/22.png) no-repeat center left;
        color: #a71212;
    }

    .list ul li.act {
        background: url(/img/option_green.png) no-repeat center left;
        color: #04a993;
    }

    .but {
        width: 140px;
        margin: 70px auto;
    }

    .but a {
        display: inline-block;
    }

    .but a.one {
        width: 140px;
        height: 40px;
        background: url(/img/14.png) no-repeat;
    }

    .nav {
        width: 960px;
        margin: 0 auto;
        height: 45px;
    }

    .nav li {
        float: left;
        color: #593a0f;
        font: 14px '微软雅黑';
        line-height: 45px;
        margin-right: 80px;
    }

    .fs {
        width: 1000px;
        text-align: center;
        font: 28px '微软雅黑';
        color: #cc3029;
        height: 60px;
        overflow: hidden;
        line-height: 60px;
        margin: -10px auto 40px;
    }

    .fs span {
        font-size: 60px;
        line-height: 60px;
    }
</style>
<div style="height: 176px;"></div>
<ul class="nav">
    <li>用户名：{{ $user->username }}</li>
    <li>
        <a href="javascript:void(0)" onclick="if (confirm('是否确认退出！')) {$('#logout-form').submit();}">退出</a>

        <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
            @csrf
        </form>
    </li>
    <li style="margin-right: 0; float: right;">每题分值: {{ $test->pre_score }}</li>
    <li style="float: right;">题目数量：{{ $test->question_count }}</li>
</ul>
<div style="height: 41px;"></div>
<div class="tit">分数</div>
<div class="fs"><span>{{ $test->test_score }}</span>分</div>
<div class="tit">错题统计（<span class="true-option">正确</span><span class="false-option">已选</span>）</div>

@foreach($questions as $question)
    <div style="margin-bottom: 20px;">
        <div class="list">
            <p>{{ $loop->iteration }}. {{ $question->question }}</p>
            <ul>
                @if($question->type == 2)
                    <li data-id="1" class="{{ in_array('1', $question->answer_array ?? []) ? 'act' : '' }} {{ in_array('1', $question->user_answer ?? []) ? 'cur' : '' }}">正确</li>
                    <li data-id="2" class="{{ in_array('2', $question->answer_array ?? []) ? 'act' : '' }} {{ in_array('2', $question->user_answer ?? []) ? 'cur' : '' }}">错误</li>
                @else
                    <li data-id="1" class="{{ in_array('1', $question->answer_array ?? []) ? 'act' : '' }} {{ in_array('1', $question->user_answer ?? []) ? 'cur' : '' }}">{{ $question->option_1 }}</li>
                    <li data-id="2" class="{{ in_array('2', $question->answer_array ?? []) ? 'act' : '' }} {{ in_array('2', $question->user_answer ?? []) ? 'cur' : '' }}">{{ $question->option_2 }}</li>
                    <li data-id="3" class="{{ in_array('3', $question->answer_array ?? []) ? 'act' : '' }} {{ in_array('3', $question->user_answer ?? []) ? 'cur' : '' }}">{{ $question->option_3 }}</li>
                    <li data-id="4" class="{{ in_array('4', $question->answer_array ?? []) ? 'act' : '' }} {{ in_array('4', $question->user_answer ?? []) ? 'cur' : '' }}">{{ $question->option_4 }}</li>
                @endif
            </ul>
        </div>
    </div>
@endforeach

<div class="but">
    <a class="one" href="{{ route('home') }}"></a>
</div>

@endsection
